<template><!-- 进度条组件 -->
  <div class="progress-bar">
    <div class="container">
      <div class="progress">
        <div class="slider">
          <van-slider v-model="progress" @change="changeVideoTime" :step="0.001" bar-height="4" button-size="8"
            active-color="#FFFFFF" inactive-color="#666666" />
        </div>
        <div class="progress-text">
          <div class="item current">{{videoCurrTime}}</div>
          <div class="item total-time">{{videoadurTime}}</div>
        </div>
      </div>
      <div class="speed">
        <span @click="speedPopShow(true)">倍速</span>
      </div>
    </div>
    <van-overlay :show="speedShow" @click="speedPopShow(false)"
      :custom-style="{backgroundColor: 'transparent', zIndex: '1999'}" class-name="overlay">
      <div class="speed-pop">
        <ul class="speed-list">
          <li :class="['speed-item', {'active': item.value === speedFont}]" v-for="(item, index) in speed"
            @click="changeSpeed(item.value)">
            {{item.text}}
          </li>
        </ul>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  export default {
    props: {
      progress: Number, // 进度
      changeSpeedOut: Function, // 更改倍速
    },
    data() {
      return {
        speedShow: false, // 倍速弹窗
        speedFont: 1, // 当前倍速
        speed: [
          {
            value: 0.5,
            text: '0.5x',
          },
          {
            value: 0.75,
            text: '0.75x',
          },
          {
            value: 1,
            text: '1.0x',
          },
          {
            value: 1.25,
            text: '1.25x',
          },
          {
            value: 1.5,
            text: '1.5x',
          },
        ]
      }
    },
    created() {
    },
    mounted() {
    },
    computed: {
      videoCurrTime() {//当前视频播放的时长
        return this.timeRule(this.$store.state.currTime ?? '00:00:00')
      },
      videoadurTime() {//当前视频播放的总时长
        return this.timeRule(this.$store.state.duration ?? '00:00:00')
      }
    },
    methods: {
      // 进度条改变
      changeVideoTime(value) {
        this.$emit("changeProgress", value);
      },
      // 倍速改变
      changeSpeed(value) {
        this.changeSpeedOut(value)
        this.speedFont = value;
      },
      // 更改倍速弹窗状态
      speedPopShow(value) {
        this.speedShow = value;
      },
      timeRule(t) {
        if (t !== t) return '00:00:00'; // NaN 处理
        let h = Math.floor(t / 3600);//小时
        let m = Math.floor((t % 3600) / 60);//分
        let s = Math.floor((t % 3600) % 60);//秒
        let hour = /^\d$/.test(h) ? '0' + h : h;
        let min = /^\d$/.test(m) ? '0' + m : m;
        let sec = /^\d$/.test(s) ? '0' + s : s;
        return `${hour}:${min}:${sec}`;
      },
      setFullScreen() {
        this.$bus.$emit('setFullScreen')
      }
    },
  }
</script>

<style scoped lang="less">
  .progress-bar {
    padding: 0 24px;
    margin: 10px 0;
    height: 60px;

    .container {
      height: 100%;
      padding: 0 14px 0 24px;
      background: #FFFFFF20;
      border-radius: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .progress {
        width: 100%;
        color: #FFFFFF;
        margin-top: 8px;
        margin-right: 12px;


        .progress-text {
          margin-top: 9px;
          display: flex;
          justify-content: space-between;

          .item {
            height: 22px;
            font-size: 18px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 22px;
          }
        }
      }

      .speed {
        width: 68px;
        height: 36px;
        background: #666666;
        border-radius: 18px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          font-size: 21px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 29px;
        }
      }
    }

    .overlay {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .speed-pop {
      width: 621px;
      height: 132px;
      padding: 16px 10px;
      z-index: 2000;
      background-color: #00000090;
      border-radius: 9999px;

      .speed-list {
        display: flex;
        justify-content: space-around;

        .speed-item {
          width: 100px;
          height: 100px;
          color: #FFF;
          border-radius: 9999px;
          line-height: 100px;
          text-align: center;
          transition: all .1s;
        }

        .active {
          color: #000000;
          background-color: #FFFFFF;
        }
      }
    }
  }
</style>